<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 动态参数 -->
    <div id="app">
        这是第{{ msg }}次拿着蛋包肠架在唇齿之间，吧唧一口，好吃！
        <input type="button" v-on: click="btnClick()" value="好吃">
        <!-- //[parmAttribute] 动态参数 绑定了下面的parmattribute -->
        <a :[parmAttribute]="url">冲</a>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
    
    <script>
        let app=new Vue({
            el:"#app",
            data:{
                url:'http://4399.com',
                msg:0,
                parmattribute:'href',   //parmattribute绑定了一个href路径 然后上面的按钮绑定了parmattribute 所以上面的那个a超链接绑定了href路径
                parmArr:['fish','pig','ant','pink','blue']  //写下想要随机变成的东西
            },
            methods:{
                btnClick:function(){    //链接点点击事件 所以点按钮 那个链接前面的名字会改变
                    let rnd=Math.floor(Math.random() * this.parmArr.length);    //this.parmArr.length 找到app里面的parmArr 并且知道它的长度 不让他超过这个长度
                    console.log(rnd); //输出的随机数
                    this.msg=this.msg+1,
                    this.parmattribute=this.parmArr[rnd]    //这个动态参数会是上面自己写的那个随机数   this.parmArr[rnd]这个app里面的parmArr里面的数组的下标 所以那个a链接的动态参数会变
                }
            }
        })
    </script>
</body>
</html>